<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌曲审核</title>
    <style>
        .audio-preview {
            margin: 20px 0;
        }
    </style>
</head>
<body>
<div>
    <a href="space.html">返回大厅</a>
    <h2>待审核歌曲列表</h2>
</div>
<div id="app">
    <!-- 审核列表 -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="userName" label="作者" width="120"></el-table-column>
        <el-table-column prop="name" label="歌曲名称" width="180"></el-table-column>
        <el-table-column prop="createdAt" label="上传时间" width="180">
            <template slot-scope="scope">
                {{ formatDate(scope.row.createdAt) }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
            <template slot-scope="scope">
<!--                <el-button type="primary" size="mini" @click="showReviewDialog(scope.row)">开始审核</el-button>-->
                <el-button
                        :type="scope.row.status === 1 ? 'primary' : 'info'"
                        size="mini"
                        @click="showReviewDialog(scope.row)">
                    {{ scope.row.status === 1 ? '审核中' : '开始审核' }}
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
    </div>

    <!-- 审核对话框 -->
    <el-dialog title="歌曲审核" :visible.sync="reviewDialogVisible" width="50%">
        <div v-if="currentSong">
            <h3>歌曲名称：{{ currentSong.name }}</h3>
            <p>作者：{{ currentSong.userName }}</p>
            <p>上传时间：{{ formatDate(currentSong.createdAt) }}</p>

            <div class="audio-preview">
                <audio controls :src="currentSong.songPath"></audio>
            </div>

            <el-form ref="reviewForm">
                <el-form-item label="驳回原因" v-if="showRejectReason">
                    <el-input type="textarea" v-model="rejectReason"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="reviewDialogVisible = false">取 消</el-button>
                <el-button type="danger" @click="handleReject" v-if="showRejectReason">确认驳回</el-button>
                <el-button type="primary" @click="handlePass">通 过</el-button>
                <el-button type="warning" @click="showRejectReason = true" v-if="!showRejectReason">驳 回</el-button>
            </span>
        </div>
    </el-dialog>
</div>

<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                currentPage: 1,
                pageSize: 5,
                totalCount: 0,
                reviewDialogVisible: false,
                currentSong: null,
                rejectReason: '',
                showRejectReason: false
            };
        },
        mounted() {
            this.loadReviewList();
        },
        methods: {
            // 加载审核列表
            loadReviewList() {
                axios.get('/MVCDemo/review/getSongsForReview', {
                    params: {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    }
                }).then(resp => {
                    this.tableData = resp.data.rows;
                    this.totalCount = resp.data.totalCount;
                });
            },

            // 显示审核对话框
            showReviewDialog(song) {
                this.currentSong = song;
                // this.reviewDialogVisible = true;
                // this.showRejectReason = false;
                // this.rejectReason = '';
                //  axios.post("/MVCDemo/song/deleteSong?songId="+song.id)
                axios.post('/MVCDemo/review/startReview?songId='+this.currentSong.id
                    // params: {
                    //     songId: this.currentSong.id
                ).then(resp => {
                    if(resp.data.code===200) {
                        this.$message.success(resp.data.message);
                        this.reviewDialogVisible = true;
                        this.showRejectReason = false;
                        this.rejectReason = '';
                        this.loadReviewList();
                    }else{
                        this.$message.error(resp.data.message);
                    }
                });
            },

            // 通过审核
            handlePass() {
                axios.post('/MVCDemo/review/passReview?songId='+this.currentSong.id
                        //songId: this.currentSong.id
                ).then(resp => {
                    this.$message.success(resp.data.message);
                    this.reviewDialogVisible = false;
                    this.loadReviewList();
                });
            },

            // 驳回审核
            handleReject() {
                if (!this.rejectReason) {
                    this.$message.warning('请输入驳回原因');
                    return;
                }
                const params = new URLSearchParams();
                params.append('songId', this.currentSong.id);
                params.append('reason', this.rejectReason);
                axios.post("/MVCDemo/review/rejectReview", params, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                // axios.post("/MVCDemo/review/rejectReview?songId="+this.currentSong.id+"&reason="+this.rejectReason)
                    .then(resp => {
                    this.$message.success(resp.data.message);
                    this.reviewDialogVisible = false;
                    this.loadReviewList();
                });
            },

            // 分页处理
            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.loadReviewList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadReviewList();
            },

            // 日期格式化
            formatDate(timestamp) {
                if (!timestamp) return '';
                const date = new Date(timestamp);
                return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
            }
        }
    });
</script>
</body>
</html>